import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { LoginWrapper, LoginBox, Input, LoginBtn } from "./style";
import { actionCreators } from "./store";

function Login(props) {
    const [account, setAccount] = useState("");
    const [password, setPassword] = useState("");

    if (!props.loginStatus) {
        console.log(props.loginStatus);
        return (
            <LoginWrapper>
                <LoginBox>
                    <Input
                        placeholder="账号"
                        // innerRef={account => console.log(account)}
                        onChange={e => setAccount(e.target.value)}
                    />
                    <Input
                        placeholder="密码"
                        type="password"
                        // innerRef={password => console.log(password)}
                        onChange={e => setPassword(e.target.value)}
                    />
                    <LoginBtn onClick={() => props.login(account, password)}>
                        登录
                    </LoginBtn>
                </LoginBox>
            </LoginWrapper>
        );
    } else {
        return <Redirect to="/" />;
    }
}

const mapStateToProps = state => ({
    loginStatus: state.getIn(["login", "loginStatus"])
});

const mapDispatchToProps = dispatch => ({
    login(account, password) {
        // console.log(account, password);
        dispatch(actionCreators.login(account, password));
    }
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Login);
